<template>
  <el-card shadow="hover" class="margin-xs">
    <div class="title">上传图片/音频 支持ctrl+v</div>
    <upload-picture-and-audio
        :height="100"
        @emitPicture="(data) => form.picture = data"
        @emitAudio="(data) => form.record = data"
    />
  </el-card>
  <el-card shadow="hover" class="margin-xs">
    <div class="title">上传图片/音频/视频  支持ctrl+v</div>
    <upload-image-mp3-video
        :readonly="readOnly"
        :url="form.evidence"
        v-model:fileUrl="form.evidence"
    />
  </el-card>
</template>

<script setup lang="ts">
import uploadPictureAndAudio from '../../components/element/upload/uploadPictureAndAudio.vue'
import uploadImageMp3Video from '../../components/element/upload/uploadImageMp3Video.vue'
import {reactive, ref} from 'vue';


const readOnly = ref(false)
const form = reactive({
  picture: '',
  record: '',
  evidence: ''
})
</script>

<style scoped>
.title {
  font-size: 18px;
  font-weight: bold;
  text-align: left;
  margin-bottom: 10px;
}
:deep(.el-card__body) {
  padding: 8px;
}
</style>